<script setup>
import {userUpdateApi} from '@/api/user'
import { ElMessage } from 'element-plus';
import {postFileApi} from '@/api/file'
import { reactive, ref, watch } from "vue"
    const props = defineProps({
        userInfo:{
            require:true,
            type:Object
        }
    })

//个人信息 初值
const showUserInfoForm = ref({
    id:props.userInfo.value.id,
    avatar:props.userInfo.value.avatar,
    username:props.userInfo.value.username,
    password:'',
    email:props.userInfo.value.email,
    phone:props.userInfo.value.phone,
    summary:props.userInfo.value.summary,
    age:props.userInfo.value.age,
})

watch(props.userInfo,(newUserInfo)=>{
    showUserInfoForm.value = newUserInfo.value
},{deep:true}) 

const emits = defineEmits()
  const userInfoFormRules = {
    username:[
        {
            require:true,
            message:'用户名不能为空',
            trigger:'blur'
        },
        {
            min:1,
            max:20,
            message:'用户名长度在6-20之间',
            trigger:'blur'
        }
    ],
    password:[
        {
            require:true,
            message:'密码不能为空',
            trigger:'blur'
        },
        {
            min:6,
            max:16,
            message:'密码长度在6-16之间',
            trigger:'blur'
        }
    ],
    email:[
        {
            require:true,
            message:'邮箱不能为空',
            trigger:'blur'
        }
    ],
    phone:[
        {
            require:true,
            message:'电话不能为空',
            trigger:'blur'
        }
    ],
    age:[
        {
            require:true,
            message:'年龄不能为空',
            trigger:'blur'
        }
    ],
    summary:[   
        {
            require:false,
        }
    ],  
  }

//修改信息
  const onUpdate = async ()=>{
    emits('updateUser',showUserInfoForm.value)
}
//取消修改
const cancle = async ()=>{
    showUserInfoForm.value.age = props.userInfo.value.age
    showUserInfoForm.value.summary = props.userInfo.value.summary
    showUserInfoForm.value.phone = props.userInfo.value.phone
    showUserInfoForm.value.email = props.userInfo.value.email
    showUserInfoForm.value.username = props.userInfo.value.username
    showUserInfoForm.value.avatar = props.userInfo.value.avatar
    showUserInfoForm.value.password = ''
    emits('cancle')
}
const upload = ref(null)
//覆盖上一张图片
const handleExceed = (file)=>{
    ElMessage.warning('最多上传一张图片！')
}

const onChange = async (file)=>{
    const response = await postFileApi(file.raw)
    showUserInfoForm.value.avatar = response.data.data[0]
}
</script>
<template>
    <div>
        <el-form
        :model="showUserInfoForm"
        >
            <!-- 修改头像 -->
            <el-form-item>
                <el-upload
                    action="#"
                    list-type="picture-card" 
                    ref="upload"
                    :limit="1"
                    :on-exceed="handleExceed"
                    :default="showUserInfoForm.avatar"
                    :on-change="onChange"
                    :auto-upload="false">
                      <img v-if="imgUrl" :src="showUserInfoForm.avatar" class="avatar" />
                      <el-icon
                       v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
            </el-form-item> 
            
            <!--用户名  -->
            <el-form-item prop="username">
                <span>用户名:</span>
                <el-input
                clearable
                placeholder="请输入用户名"
                v-model="showUserInfoForm.username"
                >
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <span>密码:</span>
                <el-input
                v-model="showUserInfoForm.password"
                placeholder="请输入密码"
                type="password"
                show-password
                clearable
                prefix-icon="Lock"
                ></el-input>
            </el-form-item >
            <el-form-item prop="email">
                <span>邮箱:</span>
                <el-input
                clearable
                placeholder="请输入邮箱"
                v-model="showUserInfoForm.email"
                ></el-input>
            </el-form-item>
            <el-form-item prop="phone">
                <span>电话:</span>
                <el-input
                clearable
                placeholder="请输入电话号码"
                v-model="showUserInfoForm.phone"
                ></el-input>
            </el-form-item>
            <el-form-item prop="age">
                <span>年龄:</span>
                <el-input
                clearable
                placeholder="请输入年龄"
                v-model="showUserInfoForm.age"
                ></el-input>
            </el-form-item>
            <el-form-item prop="summary">
                 <span>各人简介：</span>
                <el-input
                clearable
                placeholder="介绍一下自己吧~"
                v-model="showUserInfoForm.summary"
                type="textarea"
                ></el-input>
            </el-form-item>
            <!-- 修改按钮 -->
            <el-form-item>
                 <el-button
                 type="primary"
                 @click="onUpdate">
                    确认
                </el-button>
                <el-button
                 @click="cancle">
                    取消
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<style lang="scss" scoped>

</style>